import React from "react";
import { BrowserRouter, Route, Switch, NavLink, Redirect } from 'react-router-dom';

export default class RouterDemo extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div style={{padding:30}}>
                    <ol>
                        <li><NavLink exact={true} to={"/"}>首页</NavLink></li>
                        <li><NavLink to={"/about"}>关于</NavLink></li>
                        <li><NavLink to={"/test"}>测试</NavLink></li>
                    </ol>
                    <p>
                        <Switch>
                            <Route exact={true} path={"/"} component={Home}/>
                            <Route path={"/about"} component={About}/>
                            <Route path={"/test"} component={Test}/>
                            <Redirect to={"/"}/>
                        </Switch>
                    </p>
                </div>
            </BrowserRouter>
        );
    }
}

function Home(props) {
    return (
        <h1>首页</h1>
    );
}

function About(props) {
    return (
        <h1>关于</h1>
    );
}

function Test(props) {
    return (
        <h1>测试</h1>
    );
}